<template>
  <div>
    <el-form size="medium" >
      <el-form-item>
        <el-input style="width:200px" placeholder="商户名称" v-model="pro.name"><el-button slot="append" @click="searchData">搜索</el-button></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-table :key="rk" :data="list">
          <el-table-column prop="name" label="商户">
            <template slot-scope="scope">
              <div class="merch-thumb">
                <vimage  :src="scope.row.logo" ></vimage>
                <span>{{ scope.row.name }}</span>
              </div>

            </template>
          </el-table-column>
          <el-table-column width="120px" label="操作">
            <template slot-scope="scope">
              <el-button :type="scope.row.checked ? 'primary' : ''" @click="selectItem(scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="table_footer">
          <el-pagination @current-change="changePage" class="pages" background hide-on-single-page layout="prev, pager, next" :page-size="size" :total="total"></el-pagination>
        </div>
        <!-- <div class="table_footer" v-show="list.length > 0"><el-button type="primary" @click="outData">选择数据</el-button></div> -->
      </el-form-item>
    </el-form>
    <div class="dialog-footer">
      <el-button @click="outData('close')">取消</el-button>
      <el-button type="primary" @click="outData">确定</el-button>
    </div>
  </div>
</template>

<script>
import {getMerchantList} from '@/api/mall/merchant';
export default {
  name: 'SelectMerch',
  data() {
    return {
      isLoading: false,
      radio: 1,
      pro: {
        name: ''
      },
      proTemp: {},
      list: [],
      //outlist:[],
      page: 1,
      size: 5,
      total: 0,
      rk: 1
    };
  },
  props: {
    data: {
      type: Array,
      default: function() {
        return [];
      }
    },
    limit: {
      type: Number,
      default: 100
    }
  },
  created() {
    this.outlist = this.data;
  },
  mounted() {
    this.searchData();
  },
  methods: {
    //搜索数据
    searchData() {
      this.proTemp = Object.assign({}, this.pro);
      this.getData();
    },
    //搜索数据本体
    getData() {
      this.isLoading = true;
      getMerchantList(this.proTemp, this.page, this.size).then(res => {
        this.isLoading = false;
        this.list = res.msg.data;
        //筛选哪些数据是传入的已选择数据
        this.list.forEach(e => {
          if (this.data.findIndex(_ => _.id == e.id) > -1) {
            e.checked = true;
          }
        });
        this.total = res.msg.total;
      });
    },
    //选择单条记录
    selectItem(item) {
      if (!item.checked) {
        if (this.data.length < this.limit) {
          item.checked = true;
          this.data.push(item);
        } else {
          //数据已满
        }
      } else {
        //移除数据
        item.checked = false;
        this.data.splice(this.data.findIndex(_ => _.id == item.id), 1);
      }
      this.rk++;
    },
    //切换分页
    changePage(page) {
      this.page = page;
      this.getData();
    },
    //确定选择数据
    outData() {
      this.$emit('outData', this.outlist);
      //this.$emit('outData');
    }
  }
};
</script>

<style scoped lang="scss">
.merch-thumb {
  display: flex;
  align-items: flex-start;
  img {
    width: 60px;
    height: 60px;
    margin-right: 10px;
  }
}
</style>
